﻿@using VirtualPress.Infrastructure.Entities.Entity;
@{
    List<string> files = ViewBag.Files;
    MagazineItem magazine = ViewBag.Magazine;
    Periodical journal = ViewBag.Journal;
    ViewBag.Title = journal.Name;
    Layout = "/Views/Shared/_Simple.cshtml";
}
@section head
{
    <style type="text/css">
        img
        {
            width: 650px;
        }
        #flipbook
        {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        #flipbook .shadow, #flipbook.shadow
        {
            -webkit-box-shadow: 0 4px 10px #666;
            -moz-box-shadow: 0 4px 10px #666;
            -ms-box-shadow: 0 4px 10px #666;
            -o-box-shadow: 0 4px 10px #666;
            box-shadow: 0 4px 10px #666;
        }
        #flipbook .page-wrapper
        {
            -webkit-perspective: 2000px;
            -moz-perspective: 2000px;
            -ms-perspective: 2000px;
            perspective: 2000px;
        }
        .even
        {
            -webkit-box-shadow: 20px 0px 10px #666;
        }
    </style>
}
<div id="flipbook">
    @{
        if (files != null && files.Any())
        {
            for (int i = 0, len = files.Count; i < len; i++)
            {
                if (i <= 1 || i >= len - 2)
                {
        <div class="hard">
            <img src="@files[i]" alt="@files[i]" />
        </div>
                }
                else
                {
        <div>
            <img src="@files[i]" alt="@files[i]" />
        </div>
                }
            }
        }
    }
</div>
@section tail
{
    <script type="text/javascript" src="/Scripts/turnjs/all.js"></script>
    <script type="text/javascript" src="/Scripts/turnjs/turn.min.js"></script>
    <script type="text/javascript">
        $("#flipbook").turn({
            width: 1300,
            height: 888,
            autoCenter: true
        });
    </script>
}
